<template>
    <div>
        <el-container>
            <!-- 顶部区域 -->
            <el-header>
                <common-user-header></common-user-header>
            </el-header>
            <!-- 内容区域 -->
            <el-main>
                <!-- 子路由出口 -->
                <!-- 子路由匹配到的组件将渲染在这里 -->
                <router-view :key="key"></router-view>
            </el-main>
            <!-- 底部部区域 -->
            <el-footer>
                <common-user-footer></common-user-footer>
            </el-footer>
        </el-container>
    </div>
</template>
<script>
import CommonUserHeader from '../components/CommonUserHeader.vue'
import CommonUserFooter from '../components/CommonUserFooter.vue'
export default {
    data(){
        return {}
    },
    components:{
        CommonUserHeader,
        CommonUserFooter,
    },
    computed: {
        key (){
            return this.$route.path + Math.random();
        }
    },
}
</script>

<style lang="less" scoped>
.el-header{
    padding: 0;
}
.el-footer{
    padding: 0;
}
.el-menu {
    border-right: none;
}
.el-main{
    padding: 0px;
}

</style>